<template>
  <div class="navMenu">
    <label v-for="(navMenu, index) in navMenus" :key="index">
      <el-menu-item
        v-if="navMenu.children == null"
        :key="navMenu.url"
        :index="navMenu.path"
        @click="clickMenu(navMenu)"
      >
        <i :class="'iconfont icon-' + navMenu.icon"></i>
        <span slot="title">{{ navMenu.label }}</span>
      </el-menu-item>
      <el-submenu
        v-if="navMenu.children"
        :key="navMenu.url"
        :index="navMenu.path"
      >
        <template slot="title">
          <i :class="'iconfont icon-' + navMenu.icon"></i>
        </template>
        <el-menu-item-group style="background: rgba(0, 0, 0, 0)">
          <el-menu-item
            :index="subItem.path"
            v-for="(subItem, subIndex) in navMenu.children"
            :key="subIndex"
            @click="clickMenu(subItem)"
          >
            <span slot="title">{{ subItem.label }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </label>
  </div>
</template>

<script>
export default {
  name: 'NavMenu',
  props: ['navMenus'],
  data() {
    return {}
  },
  methods: {
    clickMenu(item) {
      this.$router.push({ name: item.name })
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

<style scoped lang="scss">
.el-menu-item i {
  font-size: 0.24rem;
  font-weight: 800;
  background-image: -webkit-linear-gradient(bottom, #10ebff, #01afe1, #01a2f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-menu-item {
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 18px;
  padding: 0 !important;
  text-align: center;
}

.el-menu-item {
  color: #fff;
  font-size: 0.14rem;
}
.el-submenu__icon-arrow {
  display: none;
}
.el-menu-item:hover {
  border: 2px solid rgb(2, 175, 255);
  i {
    background-image: -webkit-linear-gradient(bottom, #fff, #fff, #fff);
  }
}
.el-submenu__title:hover {
  i {
    background-image: -webkit-linear-gradient(
      bottom,
      #10ebff,
      #01afe1,
      #01a2f1
    );
  }
}
.navMenu {
  display: flex;
  height: 80%;
  margin: 10% 0;
  flex-direction: column;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  label {
    flex: 1;
    justify-content: space-between;
    width: 0.8rem;
  }
}
</style>
<style lang="scss">
.el-submenu__icon-arrow {
  display: none;
}
.el-submenu__title i {
  font-size: 0.32rem;
  font-weight: 800;
  background-image: -webkit-linear-gradient(bottom, #10ebff, #01afe1, #01a2f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-submenu__title {
  width: 0.8rem !important;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 18px;
  padding: 0 !important;
  text-align: center;
}
</style>
